<template>
  <div class="box">
    <div class="top">
      <h3>欢迎登录</h3>
      <p>虾米-商城欢迎你</p>
    </div>
    <div class="center">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="手机号码"
          label="手机号码"
          placeholder="用户名"
          :rules="[{ pattern, message: '请输入正确的手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ validator, message: '请输入正确的密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
    <div class="bottom">
      <p style="color:gray;margin:30px 0" >忘记密码</p>
      <router-link to="/resign">还没有注册?立即注册</router-link>
    </div>
  </div>
</template>

<script>
import PATH from "../router/constant"
export default{
  data(){
    return{
      username:"",
      password:"",
      pattern: /^1[3|4|5|7|8][0-9]{9}$/,
    }
  },
  methods:{
    onSubmit(){
      if(this.$storage.getToken()){
        alert("用户已经登录")
        this.$router.goNext(PATH.USER)
      }else{
      this.$CLIENT.setLogin({params:{mobile:this.username,pwd:this.password}}).then(res=>{
        this.$storage.setToken(res.data.data.token);
        this.$router.goNext(PATH.HOME)
      })
      }
    },
    validator(val) {
      return /^[a-zA-Z_][a-zA-Z0-9]{4,19}/.test(val);
    },
  }
}

</script>

<style scoped>
.bottom {
  width: 100%;
  height: 100px;
  text-align: center;
}
.box {
  width: 95%;
  height: 95%;
  /* border: 1px solid #eee; */
  margin: 2.5% auto;
}

.top h3 {
  font-size: 40px;
  color: indianred;
  margin: 50px 30px 30px;
}
.top p {
  color: lightgrey;
  margin: 30px 30px;
}
</style>